<template>
  <div class="pdf-view neu-pointer">
    <div id="viewerContainer" ref="containerPdf" class="py-2">
      <div class="pdfViewer" @click="drawer = true" />
    </div>
  </div>
</template>
<script>
import getPdfjsDist from './getPdfjsDist'

export default {
  name: 'Pdf',
  props: {
    resourceURL: {
      type: String,
      default: ''
    },
    resourceName: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'canvas'
    }
  },
  data () {
    return {
      CMAP_URL: null,
      drawer: false,
      pdfViewer: null,
      pdfViewerD: null,
      pdfLinkService: null,
      pdfLinkServiceD: null,
      currentScale: 'page-width',
      loadingTask: null,
      loadingTaskD: null,
      pdfjsDistPath: process.env.NODE_ENV === 'development' ? '' : ('//' + document.domain)
    }
  },
  watch: {
    resourceURL () {
      // 如果存在pdfViewer则取消渲染
      if (this.pdfViewer) {
        this.pdfViewer._cancelRendering()
      }
      this.renderPdf()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.pdfLibInit().then(() => {
        this.renderPdf()
      })
    })
  },

  methods: {
    onPagesInit ({ source }) {
      source.currentScaleValue = this.currentScale
    },
    async pdfLibInit () {
      let pdfjsLib = window.pdfjsLib
      let pdfjsViewer = window.pdfjsViewer
      if (!pdfjsLib || !pdfjsViewer) {
        try {
          await getPdfjsDist(this.pdfjsDistPath)
          this.CMAP_URL = `${this.pdfjsDistPath}/pdf/cmaps/`
          pdfjsLib = window.pdfjsLib
          pdfjsLib.GlobalWorkerOptions.workerSrc = `${this.pdfjsDistPath}/pdf/web/pdf.worker.js`
          pdfjsViewer = window.pdfjsViewer
        } catch (error) {
          return
        }
      }
      const container = document.getElementById('viewerContainer')// this.$refs.containerPdf
      const eventBus = new pdfjsViewer.EventBus()

      // (Optionally) enable hyperlinks within PDF files.
      const pdfLinkService = new pdfjsViewer.PDFLinkService({
        eventBus: eventBus
      })
      this.pdfLinkService = pdfLinkService
      const pdfViewer = new pdfjsViewer.PDFViewer({
        container: container,
        eventBus: eventBus,
        linkService: pdfLinkService,
        renderer: this.type,
        textLayerMode: false,
        downloadManager: new pdfjsViewer.DownloadManager({}),
        enableWebGL: true
      })
      this.pdfViewer = pdfViewer
      pdfLinkService.setViewer(pdfViewer)

      eventBus.on('pagesinit', this.onPagesInit)
    },
    async pdfLibInitD () {
      let pdfjsLib = window.pdfjsLib
      let pdfjsViewer = window.pdfjsViewer
      if (!pdfjsLib || !pdfjsViewer) {
        try {
          await getPdfjsDist(this.pdfjsDistPath)
          this.CMAP_URL = `${this.pdfjsDistPath}/pdf/cmaps/`
          pdfjsLib = window.pdfjsLib
          pdfjsLib.GlobalWorkerOptions.workerSrc = `${this.pdfjsDistPath}/pdf/web/pdf.worker.js`
          pdfjsViewer = window.pdfjsViewer
        } catch (error) {
          return
        }
      }

      const container = this.$refs.containerD
      const eventBus = new pdfjsViewer.EventBus()

      // (Optionally) enable hyperlinks within PDF files.
      const pdfLinkService = new pdfjsViewer.PDFLinkService({
        eventBus: eventBus
      })
      this.pdfLinkServiceD = pdfLinkService
      const pdfViewerD = new pdfjsViewer.PDFViewer({
        container: container,
        eventBus: eventBus,
        linkService: pdfLinkService,
        renderer: this.type,
        textLayerMode: 0,
        downloadManager: new pdfjsViewer.DownloadManager({}),
        enableWebGL: true
      })
      this.pdfViewerD = pdfViewerD
      pdfLinkService.setViewer(pdfViewerD)

      eventBus.on('pagesinit', this.onPagesInit)
    },
    renderPdf () {
      setTimeout(() => {
        if (!this.resourceURL) { return }
        // Loading document.
        if (this.pdfViewer === null || this.pdfLinkService === null) {
          return
        }
        if (this.loadingTask !== null) {
          this.loadingTask.destroy()
          this.loadingTask = null
        }
        this.loadingTask = window.pdfjsLib.getDocument({
          cMapUrl: this.CMAP_URL,
          cMapPacked: true,
          url: this.resourceURL
        })
        return this.loadingTask.promise.then((pdfDocument) => {
          if (pdfDocument.loadingTask.destroyed || !this.resourceURL) { return }
          this.pdfViewer.setDocument(pdfDocument)
          this.pdfLinkService.setDocument(pdfDocument, null)
          this.loadingTask = null
        }).catch(() => { })
      }, 100)
    },
    renderPdfD () {
      if (!this.resourceURL) { return }
      // Loading document.
      if (this.pdfViewerD === null || this.pdfLinkServiceD === null) {
        return
      }
      if (this.loadingTaskD !== null) {
        this.loadingTaskD.destroy()
        this.loadingTaskD = null
      }
      this.loadingTaskD = window.pdfjsLib.getDocument({
        // cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/' || this.CMAP_URL,
        cMapUrl: this.CMAP_URL,
        cMapPacked: true,
        url: this.resourceURL
      })
      return this.loadingTaskD.promise.then((pdfDocument) => {
        if (pdfDocument.loadingTask.destroyed || !this.resourceURL) { return }
        this.pdfViewerD.setDocument(pdfDocument)
        this.pdfLinkServiceD.setDocument(pdfDocument, null)
        this.loadingTaskD = null
      }).catch(() => { })
    }
  }
}
</script>
<style scoped lang="scss">
.pdf-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#viewerContainer,
.viewerContainer {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
#viewerContainerD,
.viewerContainerD {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
:deep(#el-drawer__title) {
  margin-bottom: 20px;
}
</style>
